<template>
    <div class="keypad-box">
        <div class="layout-zfb">
            <div class="key-box" v-for="(i,index) in layout[options]" :key="index" :class="getClass(i)" @click="addNumber(i)">
                <i v-if="i.class && i.class === 'del'" class="iconfont icon-guanbi2"></i>
                {{i.label}}
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'e-keypad',
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: [String, Number],
        default: 0
      },
      maxLength: {
        type: String,
        default: 10
      },
      options: {
        type: String,
        default: 'zfb'
      },
      change: {}
    },
    data: function () {
      return {
        layout: {
          'some-number': [
            {label: 9},
            {label: 8},
            {label: 7},
            {label: 6},
            {label: 5},
            {label: 4},
            {label: 3},
            {label: 2},
            {label: 1},
            {label: '.', type: 'once'},
            {label: 0},
            {label: null, class: 'hide del', type: 'del'},
          ],
          'zfb': [
            {label: 1},
            {label: 2},
            {label: 3},
            {label: 4},
            {label: 5},
            {label: 6},
            {label: 7},
            {label: 8},
            {label: 9},
            {label: '.', type: 'once'},
            {label: 0, class: 'z'},
            {label: null, class: 'del', type: 'del'},
            {label: '确定', class: 'ok', type: 'next'}
          ]
        },
        onceStatus: false,
        number: this.value || 0
      }
    },
    methods: {
      next () {
        this.$emit('next')
      },
      del () {
        if (String(this.number) === '0' || this.number.length === 1) {
          this.number = '0'
          return false
        }
        if (this.number.lastIndexOf('.') === this.number.length - 1) {
          this.onceStatus = false
        }
        this.number = this.number.slice(0, -1)
      },
      once () {
        console.log('--this.onceStatus--', this.onceStatus)
        this.onceStatus = true
        if (this.onceStatus) {

          if (String(this.number).indexOf('.') === -1) {
            this.number += '.'
          }
        }
      },
      getClass (i) {
        if (i.class) {
          return i.class
        }
      },
      addNumber (i) {
        if(this.value != this.number) {
          this.number = this.value
        }
        if (i.type) {
          if (/\d/.test(this.number)) {
            typeof this[i.type] === 'function' ? this[i.type]() : null
          }
        } else {
          console.log('--this.number--', this.number)
          if (String(this.number) === '0') {
            this.number = String(i.label)
          } else {
            let temp = this.number + String(i.label)
            if(temp.length <= this.maxLength) {
              this.number = temp
            }
          }
          // this.number = this.number.replace(/^0/,'')
        }
        console.log('-qq-this.number--', this.number)
        this.$emit('change', String(this.number))
        typeof this.change === 'function' ? this.change(i) : null
      }
    } // 函数
  }
</script>
<style lang='scss'>
    .keypad-box {
        user-select: none;
        .layout-zfb {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-template-rows: 50px 50px 50px 50px;
            grid-auto-flow: row;
            background-color: #d6d6d8;
            color: #030305;
            grid-column-gap: 1px;
            grid-row-gap: 1px;
            padding-top: 1px;
            font-weight: bold;
            font-family: sans-serif;
            .key-box {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f6f6f8;
                transition: all 0.3s;
                &:active {
                    background-color: #e2e2e2;
                }
            }
            .del {
                font-weight: normal;
                grid-column: 4;
                grid-row: 1 / 3;
                >i:active {
                    &::before {
                        content: "\e724";
                    }
                }
            }
            .ok {
                font-weight: normal;
                grid-column: 4;
                grid-row: 3 / 5;
                background-color: #2b91e3;
                color: white;
            }
            .z {
                grid-column: 2 / 4;
            }
        }
    }
</style>
